<template>
  <div>
    <div style="text-align: left">
      <span style="text-align: left;
       font-weight: 700;
        font-size: 20px;">歌曲列表</span>
      <span style="
      font-size: 10px;
        padding-left: 20px;">{{musicList.length}}首歌曲</span>
    </div>
    <el-table
        :header-cell-style="{
        background: '#b4b4b4',
        color: '#333',
        fontSize: '14px',

      }"
        ref="singleTable"
        :data="musicList"
        stripe
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%;">
      <el-table-column
          label="序号"
          type="index"
          width="400px"
      >
      </el-table-column>
      <el-table-column
          property="songname"
          label="歌名"
          style="text-align: center">
        <template slot-scope="scope">
          <i class="el-icon-star-off"></i>
          {{scope.row.songname}}
        </template>


      </el-table-column>
      <el-table-column
          property="singer"
          label="歌手">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "myryanking",
  data() {
    return {
      musicList: [],
      iconlist:[
        {icon:"el-icon-star-off"}
      ],
      currentRow: null
    }
  },
  created() {
    this.$axios.get('/api/adminup/upmusicList').then(res => {
      console.log(res.data.data)
      if (res.data.data != null && res.data.data.length > 0) {
        this.musicList = res.data.data;
      }

    })
  },

  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    }
  }
}
</script>

<style scoped>

</style>